<template>
    <div class="my-address">
        <IHeader class="header" back="true" title="收货地址" address="true"></IHeader>
        <scroller class="wrap">
            <div class="contact-item" v-if="addressList && addressList.length > 0" v-for="(item, index) in addressList" :key="index" @click="pushToWriteAdd(item.id)">
                <div class="contact">
                    <div class="contact-info">
                        <text class="name">{{item.consignee}}</text>
                        <text class="tel">{{item.phone}}</text>
                        <text class="moren" v-if="item.openDefaultAddress === '1'">默认</text>
                    </div>
                    <div class="addr">
                        <text class="address">{{item.provinceName}}{{item.cityName}}{{item.districtName}}{{item.address}}</text>
                        <image :src="imgPath('bianji.png')" class="addImg"></image>
                    </div>
                </div>
                <image :src="imgPath('bianji.png')" class="xianImg" v-if="index === 0"></image>
            </div>
            <div class="nullAddress-wrapper" v-if="!addressList || addressList.length <= 0">
                <image class="nullAddress" :src="imgPath('null_add.png')"></image>
                <text class="nullAddress-word">一个地址也没有，快去添加地址吧!</text>
            </div>
        </scroller>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { WxcLoading } from 'weex-ui'
import { getAddress } from '@/api/order'
// import {updateAddress} from '@/api/store'
// const modal = weex.requireModule('modal')

export default {
  name: 'myAddress',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      addressList: [] // 地址列表
    }
  },
  mounted () {
    const that = this
    that.loadingShow = true
    that.$api.get(getAddress, {}, function (res) {
      that.addressList = res.data
      that.loadingShow = false
    }, () => {
      that.loadingShow = false
    }, true)
  },
  methods: {
    pushToWriteAdd (id) {
      const that = this
      that.$router.push({path: '/mine/newAddress', query: {id: id}})
    },
    // 添加一个地址
    add () {
      const that = this
      that.$router.push({path: '/mine/addAddress'})
    }
  },
  components: {
    IHeader,
    WxcLoading
  }
}
</script>

<style scoped>
    .wrap {
        margin-top: 88px;
        background-color: #f5f5f5;
    }
    .contact {
        flex-direction: column;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        padding-right: 24px;
        margin-top: 16px;
        background-color: #fff;
    }
    .contact-info {
        flex-direction: row;
        align-items: center;
    }
    .name {
        font-size: 30px;
        color: rgb(70, 70, 70);
        font-weight: bold;
    }
    .tel {
        font-size: 30px;
        color: rgb(70, 70, 70);
        margin-left: 24px;
        font-weight: bold;
    }
    .addr {
        padding-top: 28px;
        flex-direction: row;
        justify-content: space-between;
    }
    .address {
        font-size: 26px;
        color: rgb(134, 134, 134);
        width: 615px;
        flex-wrap: wrap;
    }
    .moren {
        font-size: 22px;
        color: rgb(255, 15, 55);
        margin-left: 25px;
    }
    .addImg {
        width: 40px;
        height: 40px;
        margin-top: -11px
    }
    .xianImg {
        width: 750px;
        height: 8px;
    }
    .xian {
        width: 750px;
        height: 16px;
        background-color: rgb(245, 245, 245);
    }
    .col_fff {
        color: #fff;
    }
    .regular {
        font-family: regular;
    }
    .medium {
        font-family: medium;
    }
    .nullAddress-wrapper {
        margin-top: 90px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nullAddress {
        width: 471px;
        height: 296px;
    }
    .nullAddress-word {
        margin-top: 30px;
        font-size: 30px;
        line-height: 36px;
        color: #cecece;
    }
</style>
